<template>
  <div>
    <div ref="echartDom" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, watchEffect, shallowRef, inject } from "vue";
import liaoning from "@/utils/liaoning.json";
import { pxToRem } from "@/utils/index";
const chartsData = reactive({
  list: [],
});
const cityName = ref("");
const myChart = shallowRef(null);
const echartDom = ref(null);
const echarts = inject("echarts");
const clickTrue = ref(false);
// 获取地图数据
let mapData = liaoning;
// 注册自定义地图类型, 类型名称, 地图数据
echarts.registerMap("华盾", mapData);

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
  cityName: {
    type: String,
    required: true,
  },
});
const emits = defineEmits(["mapNameChange"]);
chartsData.list = props.housingSupplyStatsData;
cityName.value = props.cityName;
clickTrue.value = props.cityName == "辽宁省" ? false : true;

const getEchart = () => {
  if (echartDom.value && chartsData.list) {
    chartsData.list = chartsData.list.map((item) => {
      item.selected = item.name === cityName.value;
      return item;
    });
    myChart.value = echarts.init(echartDom.value);
    const grid = {
      left: "0%",
      right: "0%",
      bottom: "0%",
      top: "0%",
      containLabel: true,
    };
    const geo = [
      {
        map: "华盾",
        type: "map",
        aspectScale: 1,
        zoom: 0.75,
        layoutCenter: ["50%", "45%"],
        layoutSize: "155%",
        show: true,
        roam: false,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: pxToRem(12),
              textShadowColor: "#333",
              textShadowBlur: pxToRem(1),
              textShadowOffsetX: pxToRem(-2),
              textShadowOffsetY: pxToRem(5),
              fontWeight: "bold",
              fontStyle: "italic",
            },
          },
          emphasis: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            borderWidth: pxToRem(2),
            borderColor: "RGBA(86, 139, 239, 1)",
            areaColor: "RGBA(32, 115, 202, 1)",
          },
        },
      },
      // 重影
      {
        type: "map",
        map: "华盾",
        zlevel: -1,
        aspectScale: 1,
        zoom: 0.75,
        layoutCenter: ["50%", "46%"],
        layoutSize: "155%",
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            borderWidth: 2,
            borderColor: "RGBA(86, 139, 239, 1)",
            areaColor: "RGBA(0, 161, 207, 1)",
          },
          emphasis: {
            show: false,
            color: "#fff",
            fontWeight: "bold",
            areaColor: "red", // 修改选中颜色
          },
        },
      },
      {
        type: "map",
        map: "华盾",
        zlevel: -2,
        aspectScale: 1,
        zoom: 0.75,
        layoutCenter: ["50%", "47%"],
        layoutSize: "155%",
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            borderWidth: 2,
            borderColor: "rgba(11, 177, 193)",
            areaColor: "RGBA(7, 51, 109, 1)",
          },
        },
      },
    ];
    const series = [
      {
        name: "华盾数据",
        type: "map",
        map: "华盾", // 自定义扩展图表类型
        aspectScale: 1,
        zoom: 0.75, // 缩放
        selectedMode: "single",
        showLegendSymbol: true,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: "#fff",
              fontWeight: "bold",
              fontSize: pxToRem(12),
              fontStyle: "italic",
            },
          },
          emphasis: {
            show: true,
            textStyle: {
              color: "#fff",
              fontWeight: "bold",
              fontSize: pxToRem(12),
              fontStyle: "italic",
            },
          },
        },
        itemStyle: {
          normal: {
            borderColor: "rgb(55, 229, 245)",
            borderWidth: 0.5,
            areaColor: "rgba(255,255,255,0)",
          },
          emphasis: {
            show: false,
            color: "#fff",
            fontWeight: "bold",
            areaColor: "rgba(51, 227, 244, 0.8)",
          },
        },
        layoutCenter: ["50%", "45%"],
        layoutSize: "155%",
        markPoint: {
          symbol: "none",
        },
        data: chartsData.list,
      },
    ];
    const option = {
      grid,
      geo,
      series,
    };
    // 监听地图点击事件   非辽宁省权限不可点击
    if (clickTrue.value) {
      myChart.value.getZr().off("click");
    } else {
      myChart.value.on("click", (params) => {
        if (cityName.value == params.data.name) {
          cityName.value = "";
        } else {
          cityName.value = params.data.name;
        }
        // 处理点击事件逻辑
        emits("mapNameChange", {
          cityName: params.data.name,
          cityCode: params.data.code,
        });
      });
    }

    myChart.value.setOption(option);
  }
};

const updateChart = () => {
  if (chartsData.list.length > 0) {
    chartsData.mapInd = props.mapInd;
    if (myChart.value && !myChart.value.isDisposed()) {
      myChart.value.dispose(); // 销毁旧图表实例
    }
    getEchart();
  }
};

watchEffect(() => {
  updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
});
</script>
